<template>
  <div class="person">
    <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人员管理</el-breadcrumb-item>
      <el-breadcrumb-item>医生列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 选择器1职称 -->
    <el-select v-model="queryInfo.query" clearable placeholder="请选择职称" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)" @change="getDoctorList()">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" style="color: #708090; font-family: 宋体"> </el-option>
    </el-select>

    <!-- 选择器2科室 -->
    <el-select v-model="queryInfo.query1" clearable placeholder="请选择科室" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)" @change="getDoctorList()">
      <el-option v-for="item in department" :key="item.value1" :label="item.label1" :value="item.value1" style="color: #708090; font-family: 宋体"> </el-option>
    </el-select>

    <el-card shadow="never" border="false">
      <!-- 卡片头部 -->
      <template #header>
        <div class="header">
          <span>共{{ total }}条记录</span>
          <el-button icon="el-icon-plus" size="small" type="info" round @click="DialogVisible = true" style="background-color: #6495ed">添加医生</el-button>
        </div>
      </template>

      <!-- 医生信息展示 -->
      <el-table stripe :data="doctorsList" style="width: 100%" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="id" label="医生编号"> </el-table-column>
        <el-table-column prop="name" label="医生姓名"> </el-table-column>
        <el-table-column prop="age" label="年龄"> </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="department" label="科室"> </el-table-column>
        <el-table-column prop="role" label="职称"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>

        <!-- 删除和编辑按钮 -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="editDoctor(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" icon="el-icon-delete" style="color: red" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageStart"
        :page-sizes="[3, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- 添加医生的对话框 -->
      <el-dialog title="添加/编辑医生" :visible.sync="DialogVisible" width="30%" @close="addDialogClosed()">
        <el-form ref="addDoctorForm" :model="newDoctor" label-width="60px">
          <el-form-item label="姓名">
            <el-input v-model="newDoctor.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-row :gutter="0">
            <el-col :span="12">
              <el-form-item label="年龄">
                <el-input v-model="newDoctor.age" placeholder="请输入年龄"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别">
                <el-input v-model="newDoctor.sex" placeholder="请输入性别"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="科室">
            <el-select v-model="newDoctor.department" clearable placeholder="请选择科室">
              <el-option v-for="dept in department" :key="dept.value1" :label="dept.label1" :value="dept.value1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-select v-model="newDoctor.role" clearable placeholder="请选择职称">
              <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="newDoctor.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="DialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUser">确定</el-button>
          <!-- @click="submitNewDoctor" -->
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Doctor',
  data() {
    return {
      selectedTitle: '', //职称
      selectedDepartment: '', //科室
      isEditing: false, // 新增标识，判断当前操作是添加还是编辑
      options: [
        { value: '主任医师 ', label: '主任医师 ' },
        { value: '副主任医师', label: '副主任医师' },
        { value: '主治医师', label: '主治医师' },
      ],
      department: [
        { value1: '儿科', label1: '儿科' },
        { value1: '内科', label1: '内科' },
        { value1: '外科', label1: '外科' },
        { value1: '妇产科', label1: '妇产科' },
      ],
      doctorsList: [],
      value: '', // 数组department用于存储科室
      value: '',
      total: 0,
      queryInfo: {
        query: '',
        query1: '',
        pageStart: 1,
        pageSize: 5,
      },
      DialogVisible: false, //对话框状态
      newDoctor: {
        // 添加医生表单
        age: '',
        name: '',
        sex: '',
        department: '',
        role: '',
        phone: '',
      },
      editDialogVisible: false,
    };
  },
  created() {
    this.getDoctorList();
  },
  methods: {
    // 获取所有用户
    async getDoctorList() {
      // 调用post请求
      const { data: res } = await this.$http.get('allDoctor', {
        params: this.queryInfo,
      });
      this.doctorsList = res.data; // 将返回数据赋值
      this.total = res.numbers; // 总个数
    },

    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDoctorList(); // 数据发生改变重新申请数据
    },

    // 监听pageStart改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageStart = newPage;
      this.getDoctorList(); // 数据发生改变重新申请数据
    },

    // 删除按钮
    async deleteUser(id) {
      // 弹框
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch(err => err);
      // 成功删除为confirm 取消为 cancel
      if (confirmResult != 'confirm') {
        return this.$message.info('已取消删除');
      }
      const { data: res } = await this.$http.delete('deleteDoctor?id=' + id);
      if (res != 'success') {
        return this.$message.error('操作失败！！！');
      }
      this.$message.success('操作成功！！！');
      this.getDoctorList();
    },

    // 监听添加用户
    addDialogClosed() {
      this.newDoctor.age = '';
      this.newDoctor.name = '';
      this.newDoctor.sex = '';
      this.newDoctor.department = '';
      this.newDoctor.role = '';
      this.newDoctor.phone = '';
    },

    // 添加用户
    addUser() {
      this.$refs.addDoctorForm.validate(async valid => {
        if (!valid) return;
        // 确保姓名为汉字
        const isNameValid = /^[\u4e00-\u9fa5]+$/u.test(this.newDoctor.name);
        if (!isNameValid) {
          this.$message.error('姓名必须为汉字');
          return;
        }
        let action = this.isEditing ? 'editDoctor' : 'addNewDoctor';
        if (action === 'addNewDoctor') {
          const { data: res } = await this.$http.post('addDoctor', this.newDoctor);
          if (res != 'success') return this.$message.error('操作失败！！！');
          this.$message.success('操作成功！！！');
        } else {
          const { data: res } = await this.$http.put('editDoctor', this.newDoctor);
          if (res != 'success') return this.$message.error('操作失败！！！');
          this.$message.success('操作成功！！！');
        }
        //隐藏
        this.DialogVisible = false;
        this.getDoctorList();
      });
    },

    // 展示修改框
    async editDoctor(id) {
      const { data: res } = await this.$http.get('getUpDoctorDate?id=' + id);
      this.newDoctor = res;
      this.DialogVisible = true;
      this.isEditing = true;
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-top: 10px;
  margin-bottom: 25px;
}
// 职称科室选择器样式
.el-select {
  width: 200px;
  height: 10px;
  margin-right: 66px;
}
//分页样式
.el-pagination {
    margin-top: 20px; //上边距
    text-align: center; //字体居中
  }
//表格样式
.el-card {
  margin-top: 25px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 16px;
  }
}
</style>